@import './_mixin.scss';
@import './_available.scss';
.flex-one {
    flex: 1;
}

.flex-two {
    flex: 2;
}

.box-flex,
.flex-box {
    display: flex;
}

.df-center {
    display: flex;
    align-items: center;
}

.text-indent {
    text-indent: 2em;
}

.cf:before,
.cf:after {
    content: "";
    display: table;
}

.cf:after,
.cl {
    clear: both;
}

.cf {
    zoom: 1;
}

.vm {
    display: inline-block;
    vertical-align: middle;
}

.fl {
    float: left;
}

.fr {
    float: right !important;
}

.tc {
    text-align: center !important;
}

.tl {
    text-align: left !important;
}

.tr {
    text-align: right !important;
}

.fc3 {
    color: #333;
}

.fc6 {
    color: #666;
}

.fc8 {
    color: #888;
}

.fc3 {
    color: #333;
}

.ell {
    @include ell
}

@for $i from 6 through 12 {
    .fs#{$i * 2} {
        font-size: $i * 2px;
    }
}

@for $i from 0 through 10 {
    .mr#{$i * 5} {
        margin-right: $i * 5px !important;
    }
    .ml#{$i * 5} {
        margin-left: $i * 5px !important;
    }
    .mt#{$i * 5} {
        margin-top: $i * 5px !important;
    }
    .mtb#{$i * 5} {
        margin-top: $i * 5px !important;
        margin-bottom: $i * 5px !important;
    }
    .mlr#{$i * 5} {
        margin-left: $i * 5px !important;
        margin-right: $i * 5px !important;
    }
    .mb#{$i * 5} {
        margin-bottom: $i * 5px !important;
    }
    .mg#{$i * 5} {
        margin: $i * 5px !important;
    }
    .pr#{$i * 5} {
        padding-right: $i * 5px !important;
    }
    .pl#{$i * 5} {
        padding-left: $i * 5px !important;
    }
    .pt#{$i * 5} {
        padding-top: $i * 5px !important;
    }
    .pb#{$i * 5} {
        padding-bottom: $i * 5px !important;
    }
    .pd#{$i * 5} {
        padding: $i * 5px !important;
    }
    .plr#{$i*5} {
        padding-left: $i * 5px !important;
        padding-right: $i * 5px !important;
    }
    .ptb#{$i*5} {
        padding-top: $i * 5px !important;
        padding-bottom: $i * 5px !important;
    }
}

@for $i from 1 through 30 {
    .w#{$i * 10} {
        width: $i * 10px;
    }
    @if $i<21 {
        .w#{$i * 5}p {
            width: $i * 5%;
        }
    }
}